<template>
    <div class="page-container">

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="发货单列表" name="delivery"></el-tab-pane>
            <el-tab-pane label="申请单列表" name="apply">
                <template #label>
                    <span class="custom-tabs-label">
                        <span>申请单列表</span>
                        <span v-if="msgNum > 0" class="msg-quantity">{{ msgNum }}</span>
                    </span>
                </template>
            </el-tab-pane>
        </el-tabs>

        <!-- 发货单 -->
        <div v-if="activeName == 'delivery'">
            <el-row style="margin: 10px 0" justify="space-between">
                <el-row>
                    <el-button size="small" type="warning" @click="resetParams(0)">全部数据</el-button>
                </el-row>
            </el-row>

            <div class="table-box">
                <el-table :data="deliveryList" class="tableList" style="width: 100%; margin-top: 20px;" size="small" border>
                    <el-table-column prop="sendSn" label="发货单号" width="180">
                        <template #default="scope">
                            <span class="click-open-text" @click="showDeliveryModel(scope.row)">{{ scope.row.sendSn }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="applyId" label="申请编号" width="150" />
                    <el-table-column prop="deliverySkuList" label="产品名称" class-name="order-goods" width="450" align="center">
                        <template #header>
                            <el-row class="order-row-item order-border-none">
                                <el-col :span="10">产品名称</el-col>
                                <el-col :span="10">详情/规格</el-col>
                                <el-col :span="4">数量</el-col>
                            </el-row>
                        </template>
                        <template #default="scope">
                            <div style="flex:1;display:flex;flex-direction: column;">
                                <div v-for="(item, index) in scope.row.deliverySkuList" :key="index"
                                    style="flex: 1;height:100%">
                                    <el-row class="order-row-item" style="height:100%">
                                        <el-col :span="10" class="col-text">{{ item.spuName }}</el-col>
                                        <el-col :span="10" class="col-text">{{ item.skuName }}</el-col>
                                        <el-col :span="4" class="col-text">{{ item.deliverNum }}</el-col>
                                    </el-row>
                                    <el-divider
                                        style="margin: 0 -8px;width:calc(100% + 16px);border-color:var(--el-border-color-light)"
                                        v-if="index < scope.row.deliverySkuList.length - 1" />
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deliverSn" label="物流单号" width="120">
                        <template #default="scope">
                            <span style="color: #409EFF">{{ scope.row.deliverSn }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deliveryCompany" label="物流公司" />
                    <el-table-column prop="receiverName" label="收件人" />
                    <el-table-column prop="receiverPhone" label="收件电话" width="100" />
                    <el-table-column prop="receiverAddress" label="收件地址" width="180">
                        <template #default="scope">
                            <div>{{ scope.row.receiverProvince }} - {{ scope.row.receiverCity }} - {{ scope.row.receiverRegion
                            }}</div>
                            <div>{{ scope.row.receiverAddress }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="belongerName" label="订单归属人" />
                    <el-table-column prop="sendUserName" label="发货人" />
                    <el-table-column prop="deliveryTime" label="发货日期" width="130" />
                    <el-table-column prop="receiveTime" label="签收日期" width="130" />
                    <el-table-column prop="type" label="签收状态" width="80" fixed="right" >
                        <template #default="scope">
                            <el-tag :type="scope.row.type == 0 ? 'warning':'success'">{{ scope.row.type == 0 ? '运输中':'已签收' }}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-block">
                <el-pagination v-model:currentPage="query.current" v-model:page-size="query.size"
                    :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                    layout="total, sizes, prev, pager, next, jumper" :total="dTotal" :hide-on-single-page="true"
                    @size-change="sizeChange" @current-change="currentChange" />
            </div>
        </div>

        <!-- 申请单 -->
        <div v-if="activeName == 'apply'">
            <el-row style="margin: 10px 0" justify="space-between">
                <el-row>
                    <el-button size="small" type="warning" @click="resetParams(1)">全部数据</el-button>
                </el-row>
            </el-row>
    
            <div class="table-box">
                <el-table :data="list" class="tableList" style="width: 100%; margin-top: 20px;" size="small" border>
                    <el-table-column prop="id" label="申请编号" width="145"/>
                    <el-table-column prop="applyProductList" label="产品名称" class-name="order-goods" width="450" align="center">
                        <template #header>
                            <el-row class="order-row-item order-border-none">
                                <el-col :span="10">产品名称</el-col>
                                <el-col :span="10">详情/规格</el-col>
                                <el-col :span="4">数量</el-col>
                            </el-row>
                        </template>
                        <template #default="scope">
                            <div style="flex:1;display:flex;flex-direction: column;">
                                <div v-for="(item, index) in scope.row.applyProductList" :key="index"
                                    style="flex: 1;height:100%">
                                    <el-row class="order-row-item" style="height:100%">
                                        <el-col :span="10" class="col-text">{{ item.spuName }}</el-col>
                                        <el-col :span="10" class="col-text">{{ item.skuName }}</el-col>
                                        <el-col :span="4" class="col-text">{{ item.needNum }}</el-col>
                                    </el-row>
                                    <el-divider
                                        style="margin: 0 -8px;width:calc(100% + 16px);border-color:var(--el-border-color-light)"
                                        v-if="index < scope.row.applyProductList.length - 1" />
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="orderAmount" label="物流方式" /> -->
                    <el-table-column prop="receiverName" label="收件人" />
                    <el-table-column prop="receiverPhone" label="收件电话" width="100" />
                    <el-table-column prop="orderAmount" label="收件地址" width="180">
                        <template #default="scope">
                            <div>{{ scope.row.receiverProvince }} - {{ scope.row.receiverCity }} - {{ scope.row.receiverRegion
                            }}</div>
                            <div>{{ scope.row.receiverAddress }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="belongerName" label="订单归属人" />
                    <!-- <el-table-column prop="sendUserName" label="发货人" /> -->
                    <el-table-column prop="sendStatus" label="发货状态" width="80">
                        <template #default="scope">
                            <el-tag :type="scope.row.sendStatus == 0 ? 'warning':(scope.row.sendStatus == 1?'':'success')">{{ scope.row.sendStatus == 0 ? '待发货':(scope.row.sendStatus == 1?'部分已发':'全部发出') }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="80">
                        <template #default="scope">
                            <el-tag :type="scope.row.state == 0 ? 'warning':(scope.row.state == 1?'success':'info')">{{ scope.row.state == 0 ? '待处理':(scope.row.state == 1?'已处理':'已退回') }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column width="130px" label="操作" fixed="right" align="center">
                        <template #default="scope">
                            <el-button v-if="scope.row.sendStatus != 2" size="small" type="primary" link @click="showSendModel(scope.row)">发货</el-button>
                            <el-button v-if="scope.row.state == 0" size="small" type="primary" link @click="returnApply(scope.row)">退回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-block">
                <el-pagination v-model:currentPage="search.current" v-model:page-size="search.size"
                    :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true"
                    @size-change="sizeChange" @current-change="currentChange" />
            </div>
        </div>
        <logistic-detail v-model:dialogDrawer="dialogLogistic" v-model:defaultForm="rowForm" v-model:defaultType="deliveryType" @onSubmit="logisticSubmit"></logistic-detail>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import LogisticDetail from '../components/LogisticDetail.vue'
import api from '/@/api/commonApi'

export default {
    name: 'DispatchList',
    components: {
        LogisticDetail
    },
    setup() {
        const router = useRouter()
        const state = reactive({
            activeName: 'delivery',
            msgNum: 0,
            total: 0,
            dTotal: 0,
            deliveryList: [],
            query: {
                current: 1,
                size: 10,
                orderId: '',
                applyId: '',
                consignee: '',
                phone: '',
                sendUserId: ''
            },
            search: {
                current: 1,
                size: 10
            },
            list: [],
            dialogLogistic: false,
            rowForm: {},
            deliveryType: 1,

        })
        const getList = () => {
            if (state.activeName == 'apply') {
                api.deliveryApplys(state.search).then(res => {
                    state.list = res.data.records
                    state.total = res.data.total
                })
            }else{
                api.deliveryList(state.query).then(res => {
                    state.deliveryList = res.data.records
                    state.dTotal = res.data.total
                })
            }
        }
        const sizeChange = (size) => {
            if (state.activeName == 'apply') {
                state.search.size = size
            }else{
                state.query.size = size
            }
            getList()
        }
        const currentChange = (current) => {
            if (state.activeName == 'apply') {
                state.search.current = current
            }else{
                state.query.current = current
            }
            getList()
        }
        const resetParams = (idx) => {
            if(idx == 0){
                state.query = {
                    current: 1,
                    size: 10,
                    orderId: '',
                    applyId: '',
                    consignee: '',
                    phone: '',
                    sendUserId: ''
                }
                getList()
            }else {
                state.search = {
                    current: 1,
                    size: 10
                }
                getList()
            }
        }
        const handleClick = (e) => {
            state.activeName = e.props.name
            if(e.props.name == 'apply'){
                console.log("申请单列表");
                api.applyMsgRead().then(res => {
                    getUnreadMsgNum()
                })
            }else{
                console.log("前往发货单列表");
            }
            getList()
        }
        const getUnreadMsgNum = () => {
            api.applyUnreadMsgNum().then(res => {
                state.msgNum = res.data
            })
        }
        const showSendModel = (val) => {
            console.log(val);
            state.defaultType = 1
            let orderItemList = []
            val.applyProductList.forEach(item => {
                orderItemList.push({
                    orderId: item.orderId,
                    skuDesc: item.skuName,
                    skuId: item.skuId,
                    spuId: item.spuId,
                    spuPic: item.skuImg,
                    skuName: item.skuName,
                    spuName: item.spuName,
                    skuQuantity: item.needNum,
                    actualNum: item.actualNum,
                    needNum: item.needNum,
                    deliverNum: item.needNum - item.actualNum,
                })
            })
            state.rowForm = {
                id: val.orderId,
                deliveryComCode: '',
                deliveryCompany: '',
                logisticCode: '',
                receiverName: val.receiverName,
                receiverPhone: val.receiverPhone,
                receiverProvince: val.receiverProvince,
                receiverCity: val.receiverCity,
                receiverRegion: val.receiverRegion,
                receiverDetailAddress: val.receiverAddress,
                note: '',
                sendProvince: '',
                sendCity: '',
                sendRegion: '',
                sendAddress: '',
                applyId: val.id,
                area: [],
                orderItemList: orderItemList
            }
            state.dialogLogistic = true
        }
        const logisticSubmit = () => {
            getList()
        }
        const returnApply = (item) => {
            ElMessageBox.confirm(
                `是否确定退回【${item.receiverName}】的发货申请单：<br>${item.id}`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    dangerouslyUseHTMLString: true,
                }
            ).then(() => {
                api.applyReturnById(item.id).then(res => {
                    ElMessage.success("申请已退回")
                    getList()
                })
            })
        }
        const showDeliveryModel = (val) => {
            console.log(val);
            state.deliveryType = 2
            let orderItemList = []
            val.deliverySkuList.forEach(item => {
                orderItemList.push({
                    orderId: item.orderId,
                    skuDesc: item.skuName,
                    skuId: item.skuId,
                    spuId: '',
                    spuPic: item.skuImg,
                    skuName: item.skuName,
                    spuName: item.spuName,
                    skuQuantity: item.deliverNum,
                    actualNum: item.deliverNum,
                    needNum: item.deliverNum,
                    deliverNum: item.deliverNum,
                })
            })
            state.rowForm = {
                id: val.orderId,
                deliveryComCode: val.deliveryComCode,
                deliveryCompany: val.deliveryCompany,
                logisticCode: val.deliverSn,
                receiverName: val.receiverName,
                receiverPhone: val.receiverPhone,
                receiverProvince: val.receiverProvince,
                receiverCity: val.receiverCity,
                receiverRegion: val.receiverRegion,
                receiverDetailAddress: val.receiverAddress,
                note: '',
                sendProvince: val.sendProvince,
                sendCity: val.sendCity,
                sendRegion: val.sendRegion,
                sendAddress: val.sendAddress,
                applyId: val.applyId,
                sendUserName: val.sendUserName,
                sendTime: val.deliveryTime,
                sendSn: val.sendSn,
                area: [],
                orderItemList: orderItemList
            }
            state.dialogLogistic = true
        }

        onMounted(() => {
            getList()
            getUnreadMsgNum()
        })
        return {
            ...toRefs(state),
            Plus,
            Search,
            getList,
            sizeChange,
            currentChange,
            resetParams,
            handleClick,
            returnApply,
            showSendModel,
            logisticSubmit,
            getUnreadMsgNum,
            showDeliveryModel,
        }
    }
}

</script>

<style lang="scss" scoped>
.page-container {
    .page-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;

        .tips-data {
            display: flex;
            align-items: center;
            height: 28px;
            margin-top: 20px;

            .tips {
                margin-right: 3px;
                font-size: 13px;
            }

            &:first-child {
                height: unset;
                margin-top: 0;
            }
        }

        .tips-cell {
            flex: auto;

            .tips-item {
                display: flex;
                align-items: center;
                padding-left: 10px;
                justify-content: space-between;
            }

            .tips-name {
                margin-right: 10px;
                flex: 1;
                overflow: hidden;
                text-align: center;
            }

            .item-data {
                text-align: center;
                height: 28px;
                margin-top: 20px;
                line-height: 28px;
                color: var(--el-menu-text-color);
                font-size: 13px;
            }

            .text-red {
                font-size: 24px;
                color: red;
            }

            .item-right {
                margin-right: 14px;
            }

            .red {
                color: var(--el-color-danger)
            }

            .green {
                color: var(--el-color-success);
            }
        }

        :deep(.el-table--border::before),
        :deep(.el-table--border::after),
        :deep(.el-table__inner-wrapper::before),
        :deep(.el-table__border-left-patch) {
            display: none;
        }

        :deep(.el-table--border .el-table__inner-wrapper tr:first-child th:first-child),
        :deep(.el-table--border .el-table__inner-wrapper tr:first-child td:first-child) {
            border-left: none !important;
        }

        :deep(.el-table--border .el-table__cell:last-child) {
            border-right: none;
        }

        :deep(.el-table__row) {
            &:last-child {
                .el-table__cell {
                    border-bottom: none;
                }
            }
        }
    }

    .table-box {
        background: #fff;
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }

        :deep(thead .cell) {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        :deep(thead .el-icon) {
            margin-top: -2px;
            cursor: pointer;
        }

        .primary {
            cursor: pointer;
            color: var(--el-color-primary);
        }

        .short {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .table-list {
            border: 1px solid var(--el-table-border-color);
            border-bottom: none;

            :deep(thead .cell) {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            :deep(thead th:last-child .cell) {
                justify-content: center;
            }

            :deep(thead .el-icon) {
                margin-top: -2px;
                cursor: pointer;
            }

            .primary {
                cursor: pointer;
                color: var(--el-color-primary);
            }

            :deep(.el-button) {
                margin-left: 0;
                margin-right: 12px;
            }

            :deep(.el-table__body td.el-table__cell) {
                border-right: 1px solid var(--el-border-color-light);
                padding: 0;

                &:last-child {
                    border-right: none;
                }
            }

            .order-row-item {
                width: 100%;

                :deep(.el-col) {
                    border-right: 1px solid var(--el-border-color-light);
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    // &:last-child {
                    //     border-right: none;
                    // }

                    &:first-child,
                    &:nth-child(2) {
                        text-align: left;
                        justify-content: flex-start;
                        padding-left: 8px;
                    }
                }
            }

            .order-border-none {
                :deep(.el-col) {
                    border: none;
                }
            }
        }
    }
}
</style>

<style lang="scss">
.order-goods .cell {
    padding: 0;
}

.el-table__body .order-goods .cell {
    min-height: 70px;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.order-row-item {
    width: 100%;

    :deep(.el-col) {
        border-right: 1px solid var(--el-border-color-light);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        // &:last-child {
        //     border-right: none;
        // }

        &:first-child,
        &:nth-child(2) {
            text-align: left;
            justify-content: flex-start;
            padding-left: 8px;
        }
    }
}

.col-text{
    border-right: 1px solid var(--el-border-color-light) !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-tabs-label{
    position: relative;
}

.msg-quantity{
    position: absolute;
    top: -10px;
    right: -25px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    color: #FFFFFF;
    background: #E6A23C;
    display: flex;
    justify-content: center;
    align-items: center;
}

.click-open-text {
    color: #18A058;
}

.click-open-text:hover {
 cursor: pointer;
}

</style>